<template>
	<div class="wrapper">
	<swiper :options="swiperOption" v-if="list.length">
	    <swiper-slide v-for="item of list" :key="item.id">
	    	<img :src="item.imgUrl"/>
	    </swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	</div>
</template>

<script>
export default {
	name:'HomeSwiper',
	props:{
		list: Array
	},
	data() {
		return {
			swiperOption: {
				pagination:'.swiper-pagination',
				loop:true,
				autoplay: 3000,
			}
			// swiperList:[
			// 	{id:'001',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/eb/f3d2fa5308fd5f02.jpg_750x200_38b8d6f7.jpg'},
			// 	{id:'002',imgUrl:'http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg'}
			// ]
		}
	},
	computed:{
		showSwiper() {
			return this.list.length
		}
	}
}
</script>
<style lang=stylus scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background:#fff
	.wrapper
		overflow:hidden
		width:100%
		height:0
		padding-bottom:31%
		.swiper-slide
			img
				width:100%
</style>